<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/demo3.css"/>
	</head>
	<body>
		<div id="app">
			<subcomp :list="getdata[0]"></subcomp>
			<subcomp :list="getdata[1]"></subcomp>
		</div>





		<script src="js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			let banner = { //孙子组件
				props:['banner'],
				template: `
					<div class="banner">
						<img :src="banner">
					</div>
				`
			}

			let goods = { //商品列表孙子组件
				props:['goods'],
				template: `
					<div class="goods">
						<dl v-for="(item,index) in goods">
							<dt><img :src="item.goodUrl"></dt>
							<dd>{{item.gname}}</dd>
							<dd>{{item.ginfo}}</dd>
						</dl>
					</div>
				`
			}

			let subcomp = { //子组件
				props:['list'],
				template: `
					<div class="subcomp">
						<banner :banner="list.bannerUrl"></banner>
						<goods :goods="list.goodList" ></goods>
					</div>
				`,
				components:{
					goods,
					banner
				}
			}

			let myApp = new Vue({ //root
				el: '#app',
				data: {
					//当前页面中用到的所有数据
					getdata: [
						{id: 1,bannerUrl: 'https://z3.ax1x.com/2021/06/23/RmLSVU.png',goodList: [
								{id: 1,goodUrl: 'https://z3.ax1x.com/2021/06/23/RnBaKx.png',gname:'漂亮包包',ginfo:'256元' },
								{id: 2,goodUrl: 'https://z3.ax1x.com/2021/06/23/RnBaKx.png',gname:'漂亮包包',ginfo:'256元' },
								{id: 3,goodUrl: 'https://z3.ax1x.com/2021/06/23/RnBaKx.png',gname:'漂亮包包',ginfo:'256元' },
								{id: 4,goodUrl: 'https://z3.ax1x.com/2021/06/23/RnBaKx.png',gname:'漂亮包包',ginfo:'256元' },
								{id: 5,goodUrl: 'https://z3.ax1x.com/2021/06/23/RnBaKx.png',gname:'漂亮包包',ginfo:'256元' },
								{id: 6,goodUrl: 'https://z3.ax1x.com/2021/06/23/RnBaKx.png',gname:'漂亮包包',ginfo:'256元' },
							]
						}, 
						{id: 2,bannerUrl: 'https://z3.ax1x.com/2021/06/23/RmqxbT.png',goodList: [
								{id: 1,goodUrl: 'https://z3.ax1x.com/2021/06/23/RnBNx1.png',gname:'哈哈哈哈',ginfo:'698元' },
								{id: 2,goodUrl: 'https://z3.ax1x.com/2021/06/23/RnBNx1.png',gname:'哈哈哈哈',ginfo:'698元' },
								{id: 3,goodUrl: 'https://z3.ax1x.com/2021/06/23/RnBNx1.png',gname:'哈哈哈哈',ginfo:'698元' },
								{id: 4,goodUrl: 'https://z3.ax1x.com/2021/06/23/RnBNx1.png',gname:'哈哈哈哈',ginfo:'698元' },
								{id: 5,goodUrl: 'https://z3.ax1x.com/2021/06/23/RnBNx1.png',gname:'哈哈哈哈',ginfo:'698元' },
								{id: 6,goodUrl: 'https://z3.ax1x.com/2021/06/23/RnBNx1.png',gname:'哈哈哈哈',ginfo:'698元' },
							]
						}, 
					]
				},
				methods: {

				},
				components: {
					subcomp
				}
			})
		</script>
	</body>
</html>
